<script type="text/javascript" charset="utf-8">
    var error = {
        title: {
            minlength: '<?php __('Please enter Title.'); ?>',
            maxlength: '<?php __('This must not longer than 100 characters.'); ?>'
        },
        description: {
            minlength: '<?php __('Please enter Description.'); ?>',
            maxlength: '<?php __('This must not longer than 10000 characters.'); ?>'
        },
        price: {
            numonly: '<?php __('Please enter a valid monetary.'); ?>'
        },
        email: {
            minlength: '<?php __('Please enter Email.'); ?>',
            email: '<?php __('Please supply a valid email address.'); ?>'
        }
    };

    function formSaved () {
        var uploadFld = '<input type="file" id="uploadImage" name="uploadImage" value="" onchange="doUploadImage()" />' +
                        '<input type="hidden" id="imageNo" name="imageNo" value="1" />';
        $('uploadImage').up('td').update(uploadFld);
        $('AdPostTitle').focus();
        new Effect.Fade('messageBox', { delay:3, afterFinish:function(){ $('messageBox').remove(); } });
    } // formSaved


    function doUploadImage () {
        var form      = $('frm');
        var imageNo   = $F('imageNo');
        var errorMesg = '<h4><?php __('Please select an image from your computer.'); ?></h4>';
        var mesgBox   = '<div id="messageBox" class="boxError">'+errorMesg+'</div>'
        var uploading = '<div id="uploadBar'+imageNo+'" class="clear uploadBar" style="display:none; margin:5px 0 5px 0;"></div>';
        var uploadFld = '<input type="file" id="uploadImage" name="uploadImage" value="" onchange="doUploadImage()" />';

        if (!$F('uploadImage')) {
            if (!$('messageBox')) {
                $('innerContent').insert({ top:mesgBox });
            } else {
                $('messageBox').update(errorMesg);
            }

            window.effect = new Effect.Pulsate('uploadImage', {
                afterUpdate: function(o) {
                    if (o.currentFrame > 120) { window.effect.cancel(); }
                },
                afterFinish: function() {
                    $('uploadImage').focus();
                }
            });

            return false;
        } else if ($('messageBox')) {
            $('messageBox').remove();
        }

        $('uploadImage').insert({ before:uploading });
        new Effect.Appear('uploadBar'+imageNo);

        AIM.submit(form, { 'onComplete':completeCallback });
        form.submit();

        $('uploadImage').remove();
        $('imageNo').insert({ before:uploadFld });
        $('imageNo').value = parseInt(imageNo) + 1;
    } // doUploadImage

    function deleteImage (num) {
        new Effect.Fade('image'+num, { duration:0.5 });

        new Ajax.Request('<?php echo $this->base; ?>/adImages/axDelete/'+num, {
            method: 'post',
            onFailure: function() {
                new Effect.Appear('image'+num, { delay:1 });
            },
            onSuccess: function(transport, json) {
                if (json && json.status == -1) {
                    new Effect.Appear('image'+num, { delay:1 });
                } else if (json && json.status == 1) {
                    $('image'+num).remove();
                }
            }
        });
    } // deleteImage

    function deleteImage2 (id) {
        new Effect.Fade('image_'+id, { duration:0.5 });

        new Ajax.Request('<?php echo $this->base; ?>/adImages/axDelete2/'+id, {
            method: 'post',
            onFailure: function() {
                new Effect.Appear('image_'+id, { delay:1 });
            },
            onSuccess: function(transport, json) {
                if (json && json.status == -1) {
                    new Effect.Appear('image_'+id, { delay:1 });
                } else if (json && json.status == 1) {
                    $('image'+id).remove();
                }
            }
        });
    } // deleteImage2


    function completeCallback (response) {
        var json = response.evalJSON();
        var num  = '';

        if (json.imageNo) {
            num = json.imageNo;
            $('uploadBar'+num).remove();
        }
        if (json.status != 1) {
            var err = (json.message) ? json.message : '<?php __('Fail upload image'); ?>';
            $('innerContent').insert({ top:'<div id="messageBox" class="boxError"><h4>'+err+'</h4></div>' });
            return false;
        } else if (json.status == 1) {
            var img = '<div id="image'+num+'" class="dl rel previewImage"'+
                      ' style="background-image:url(<?php e($this->base); ?>/img/tmp/'+json.filename+');">'+
                      '<div class="abs imageDelete" style="top:1px; right:1px;" onclick="deleteImage('+num+')"></div></div>';
            $('uploadImage').up('td').insert({ top:img });
        }

        new Effect.Highlight('image'+num);
    } // completeCallback
</script>

<div style="padding-left:10px; padding-top:15px; margin-bottom:20px;">
  <h3><?php echo $pageTitle; ?></h3>
</div>

<div style="padding-left:10px"><?php __('Select Category'); ?>: <span class="bold"><?php __($selectedCategory); ?></span>
<?php echo $html->link('Change category', array('controller'=>'adCategories','action'=>'selectCategory')); ?></div>
<div class="bl" style="width:60%; margin:10px; padding:3px 5px 3px 5px; background:#FEF6F5;">
  <?php __($sitename); ?> <?php __('is absolutely FREE! This classified ad will not cost you a penny.'); ?><br />
  <?php __('Please do not advertise businesses or services or your account may be terminated.'); ?>
</div>
<div class="form">
  <div class="dl" style="width:50%">
<?php
    if ($this->action == 'add') {
        $action = 'Add';
        $params = ' onComplete:formSaved';
    } else {
        $action = 'Edit';
        $params = ' ';
    }
    echo $form->create(
        'AdPost', array(
            'id'       => 'AdPost',
            'url'      => '/adPosts/ax'.$action,
            'onsubmit' => 'event.returnValue=false; return postForm(this, {'.$params.'});'
        )
    );
?>
  <table id="form-table">
    <tr>
      <td class="label"><?php __('Ad Type'); ?>:</td>
      <td class="input">
        <div>
          <input type="radio" value="O" name="data[AdPost][type]"<?php
              if (empty($this->data['AdPost']['type'])) { $this->data['AdPost']['type'] = 'O'; }
              echo ($this->data['AdPost']['type'] != 'W')?' checked':''; ?> /><?php __('I am offering'); ?>
          <span style="color:#666666;">- <?php __('You are offering an item for sale'); ?></span>
        </div>
        <div>
          <input type="radio" value="W" name="data[AdPost][type]"<?php
              echo ($this->data['AdPost']['type'] == 'W')?' checked':''; ?> /><?php __('I want'); ?>
          <span style="color:#666666;">- <?php __('You want to buy an item'); ?></span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="label"><?php __('Title'); ?>:</td>
      <td class="input"><?php echo $form->input('AdPost.title', array('label'=>false, 'style'=>'width:290px;')); ?></td>
    </tr>
    <tr>
      <td class="label"><?php __('Description'); ?>:</td>
      <td class="input"><?php echo $form->textarea('AdPost.description', array('label'=>false, 'style'=>'width:290px; height:100px;')); ?></td>
    </tr>
    <tr>
      <td class="label"><?php __('Condition'); ?>:</td>
      <td class="input"><?php echo $form->input('AdPost.condition', array('label'=>false, 'options'=>array('N'=>__('New',true),'U'=>__('Used',true)))); ?></td>
    </tr>
    <tr>
      <td class="label"><?php __('Price'); ?>:</td>
      <td class="input"><div class="dl" style="margin:3px;">$</div><?php echo $form->input('AdPost.price', array('label'=>false)); ?></td>
    </tr>
    <tr>
      <td class="label"><?php __('Email'); ?>:</td>
      <td class="input">
        <?php if ($this->action == 'add') {
                  $options = array('label'=>false, 'style'=>'width:290px;');
                  if ($this->data['User']['email']) {
                      $options['readonly'] = 1;
                  }
                  echo $form->input('User.email', $options);
              } else { ?>
        <span style="line-height:22px;"><?php echo $this->data['User']['email']; ?></span>
        <?php } ?>
        <div class="clear"></div>
        <span class="smallgray"><?php __('Your email address will not be shared with others'); ?></span>
      </td>
    </tr>
    <tr>
      <td class="label"><?php __('Location'); ?>:</td>
      <td class="input"><?php echo $form->input('AdPost.location', array('label'=>false, 'style'=>'width:290px;')); ?></td>
    </tr>
    <tr>
      <td></td>
      <td>
        <?php echo $form->hidden('AdPost.ad_category_id', array('value'=>$ad_category_id)); ?>
        <?php echo (empty($this->data['AdPost']['id']))?'':$form->hidden('AdPost.id'); ?>
        <?php echo $form->submit($buttonLabel, array('div'=>false)); ?>
      </td>
    </tr>
  </table>
<?php
    echo $form->end();
?>
  </div>
  <div class="dl" style="width:50%;">
    <form id="frm" name="frm" enctype="multipart/form-data" method="post" action="<?php echo $this->base; ?>/adImages/axUpload">
      <table>
        <tr>
          <td class="label"><?php __('Images'); ?>:</td>
          <td>
<?php
    if (isset($this->data['AdImage']) && is_array($this->data['AdImage'])) {
        foreach ($this->data['AdImage'] as $v) { ?>
            <div id="image_<?php echo $v['id']; ?>" class="dl rel previewImage"
             style="background-image:url(<?php echo $this->base; ?>/img/images/s_<?php echo $v['filename']; ?>);">
              <div class="abs imageDelete" style="top:1px; right:1px;" title="<?php __('delete image'); ?>" onclick="deleteImage2(<?php echo $v['id']; ?>)"></div>
            </div>
<?php   }
    }
?>
            <input type="file" id="uploadImage" name="uploadImage" value="" onchange="doUploadImage()" />
            <input type="hidden" id="imageNo" name="imageNo" value="1" />
          </td>
        </tr>
      </table>
    </form>
  </div>
</div>
<script type="text/javascript" charset="utf-8">
  $('uploadImage').value = '';
</script>